<template>
  <div class="form-single-fragment" style="position: relative;">
    <el-form :model="ruleForm" ref="ruleForm" label-width="140px" size="mini" label-position="left">
      <el-row :gutter="20" class="form-single-info">
        <el-col :span="20">
          <div class="title"><h4>积分数据</h4></div>
          <el-row>
            <el-col :span="6">
              累计积分：{{detailData.cumulativeScore}}
            </el-col>
            <el-col :span="6">
              本年度积分：{{detailData.yearSore}}
            </el-col>
            <el-col :span="6">
              累计参与项目次数：{{detailData.cumulativeTimesOfProjects}}
            </el-col>
            <el-col :span="6">
              本年度参与项目次数：{{detailData.yearTimesOfProjects}}
            </el-col>
          </el-row>
          <div class="title">
            <h4>积分记录</h4>
          </div>
          <el-table :data="tableData" size="mini" style="width: 100%;" header-cell-class-name="table-header-gray">
            <el-table-column type="index" align="center" width="55" label="序号"></el-table-column>
            <el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
            <el-table-column prop="scoringUserName" align="center" label="操作人"></el-table-column>
            <el-table-column prop="createTime" align="center" label="操作时间"></el-table-column>
            <el-table-column prop="score" align="center" label="积分"></el-table-column>
            <!-- <el-table-column prop="yearScore" align="center" label="操作后本年度积分"></el-table-column> -->
          </el-table>
          <el-row type="flex" justify="end" style="margin-top: 10px;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNo"
              :page-size="page_size"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, prev, pager, next, sizes"
              :total="total"></el-pagination>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Personalintergral } from '@/api/integrals.js';
export default {
  name: 'PersonalrecordDetail',
  data () {
    return {
      loading: false,
      isShowloading: false,
      total: 0,
      page_size: 10,
      pageNo: 1,
      customerlist: [],
      detailData: {},
      tableData: [],
      ruleForm: {
        projectName: '',
        customerId: '',
        beginDate: '',
        endDate: '',
        areaId: '',
        projectAttribute: '',
        contractStageId: '',
        listExcludeDate: []
      }
    };
  },
  created () {
  },
  mounted () {
    this.loadDetailWidgetData()
    this.loadListWidgetData()
  },
  methods: {
    /**
     * 项目积分详情
     */
    loadDetailWidgetData () {
      return new Promise((resolve, reject) => {
        Personalintergral.myScore(this).then(res => {
          this.detailData = res.data
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 个人积分记录
     */
    loadListWidgetData () {
      let params = {
        size: this.page_size,
        current: this.pageNo
      }
      return new Promise((resolve, reject) => {
        Personalintergral.MyScoreRecord(this, params).then(res => {
          if (res.data) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        }).catch(e => {
          reject(e);
        });
      });
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadCustomerList()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadCustomerList()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadCustomerList()
    }
  }
}
</script>

<style lang="scss" scoped>
h3{border-bottom: 1px solid #E9E9EB;padding: 0 0 10px;}
.table_container{margin: 10px 0;}
.form-single-info{display: flex;justify-content: center;}
.el-form-info{box-shadow: 0 0 10px rgba(0,0,0,0.05);padding: 20px;}
.el-form-info strong{margin: 0 10px;}
.el-form-info .el-time-picker{width: 100%;}
.title{
  display: flex;align-items: center;justify-content: space-between;
  h4{font-weight: bold;}
}
</style>
